<template>
  <div class="topList">
    <topListNav :title="`排行榜`"></topListNav>

    <topListRecommend 
    :recommendList="topList.recommendList" 
    :title="'推荐榜单'"
    :type='1'
    ></topListRecommend>  

    <topListOffical :officalList="topList.officalList"></topListOffical>
    
    <topListRecommend 
    :recommendList="topList.wellChosenList" 
    :title="'精选榜'"
    :type="2"
    ></topListRecommend>
  </div>
  
</template>

<script>
import topListNav from '@/components/TopList/topListNav.vue'
import topListRecommend from '@/components/TopList/topListRecommend.vue'
import topListOffical from '@/components/TopList/topListOffical.vue'
import { reactive } from '@vue/reactivity'
import {onMounted} from 'vue'
import {getTopList} from '@/api/index.js'
export default {
 components:{
  topListNav,
  topListRecommend,
  topListOffical
 },
 setup(){
   //变量
   let topList=reactive({
     //推荐榜单
     recommendList:[],
     //官方榜
     officalList:[],
     //精选榜
     wellChosenList:[],
   })
   //函数
    //获取榜单详情
   async function getTopListDetail(){
     const {data:res}=await getTopList()
     topList.recommendList=res.list.slice(16,17)  
     topList.recommendList.push(res.list[9])
     topList.recommendList.push(res.list[12])
     topList.officalList=res.list.slice(0,4)
     topList.officalList.forEach((e,index)=>{
       let arr=['rgb(244, 225, 231)','rgb(225, 235, 234)','rgb(227, 231, 240)','rgb(243, 225, 225)']
       e.backgroundColor=arr[index]
     })
     topList.wellChosenList=res.list.slice(4,10)
   }
   //生命周期钩子
   onMounted(()=>{
     getTopListDetail()
   })
   return{
     topList
   }
 }
}
</script>

<style lang="less" scoped>
.topList{
  width: 7.5rem;
  padding:0 0.2rem;
  height: 100vh;
  background-color: rgb(242, 242, 242);
  overflow: scroll;
  padding-top:1.8rem;
  padding-bottom:1.2rem;
}
</style>